<template>
	<div class="main-container">
		<bread-crumbs :title="title" class="bread-crumbs"></bread-crumbs>
		<div class="content-area">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: ''
			};
		},
		watch: {
			$route: {
				handler: function(route) {
					// 可以根据路由更新标题
					this.title = route.meta && route.meta.title ? route.meta.title : '';
				},
				immediate: true
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main-container {
		padding: 20px;
		height: 100%;
	}

	.bread-crumbs {
		margin-bottom: 20px;
		padding: 10px 16px;
		background: white;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
	}

	.content-area {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
		padding: 24px;
		min-height: calc(100% - 80px);
		transition: all 0.3s ease;
		
		&:hover {
			box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
		}
	}
</style>
